<template>
<view>
<!--pages/topicality/xiaofeiquan/xiaofeiquan.wxml-->
<!--<import src="../../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<view>
  <!-- 切换城市 -->
  <image src="http://imgbdb3.bendibao.com/xcx/20205/20/2020520135146_96009.png" class="main-img">
    <view class="city-box">
      <text>{{city}}</text>
      <!-- <image src="/images/dwicon.png"></image> -->
    </view>
    <view class="change-city">
      <text style="margin-left: 70rpx;">切换城市:</text>
      <picker @change="bindProv" :value="pindex" :range="provPick">
        <view class="sel-city">
          <view class="picker">
            <text>{{provPick[pindex]}}</text>
          </view>
          <image src="/static/images/dwicon.png"></image>
        </view>
      </picker>
      <picker @change="bindCity" :value="cindex" :range="cityPick">
        <view class="sel-city">
          <view class="picker">
            <text>{{cityPick[cindex]}}</text>
          </view>
          <image src="/static/images/dwicon.png"></image>
        </view>
      </picker>
    </view>
  </image>

  <!-- 内容 -->
  <view class="hesuan-box">
    <!-- 核酸检测地点 -->
    <view class="hs-box" v-if="infoData.place.child">
      <view v-for="(item, index) in infoData.place.child" :key="index" :class="(infoData.place.showMore1)?'hsjc-border':'hsjc-border1'" @tap="navDetail" :data-id="item.id" :data-type="item.type">
        <view class="hs-flex">
          <image src="http://imgbdb3.bendibao.com/whbdb/20202/28/20200228092343_12218.png?1"></image>
          <text>{{item.block}}</text>
        </view>
        <view class="hs-detail" v-if="item.daoyu">{{item.daoyu}}</view>
      </view>
      <!-- 查看更多 -->
      <view class="see-more" v-if="infoData.place.child.length>1 && infoData.place.showMore1" @tap="seemoreBtn" :data-name="infoData.place.block">
        <view>查看更多</view>
      </view>
    </view>
    <view class="hs-box">
      <view class="select jigou" v-if="infoData.place.child">
        <text>核酸检测机构查询</text>
        <view class="input">
          <input @input="input" class="keywords" placeholder="请输入机构名称/地址/所在区县">
          <span class="search" @tap="tojigou">搜索</span>
        </view>
      </view>
    </view>
    <!-- 核酸检测费用以及核酸预约 -->
    <view class="hs-box">
      <!-- 核酸检测费用 -->
      <view v-if="infoData.price.child">
        <view v-for="(item, index) in infoData.price.child" :key="index" :class="(infoData.price.showMore1)?'hsjc-border':'hsjc-border1'" @tap="navDetail" :data-id="item.id" :data-type="item.type">
          <view class="hs-flex">
            <image src="http://imgbdb3.bendibao.com/whbdb/20202/28/20200228092343_12218.png?1"></image>
            <text>{{item.block}}</text>
          </view>
          <view class="hs-detail" v-if="item.daoyu">{{item.daoyu}}</view>
        </view>
        <!-- 查看更多 -->
        <view class="see-more" v-if="infoData.price.child.length>1 && infoData.price.showMore1" @tap="seemoreBtn" :data-name="infoData.price.block">
          <view>查看更多</view>
        </view>
      </view>
    </view>
    <!-- 核酸检测预约 -->
    <view class="hs-box" v-if="hsData.yuyue">
      <view style="margin-top:30rpx;">
        <view class="hs-flex">
          <image src="http://imgbdb3.bendibao.com/whbdb/20202/28/20200228092343_12218.png?1"></image>
          <text>核酸检测预约</text>
        </view>
        <view v-for="(item, index) in hsData.yuyue" :key="index" :class="showMore?'hs-border':'hs-border1'">
          <view class="hsyy-box">
            <view>预约方式</view>
            <text>{{item.order_method}}</text>
          </view>
          <view class="hsyy-box">
            <view>预约入口</view>
            <text>{{item.order_way}}</text>
          </view>
          <view class="yybtn-box">
            <view class="yybtn" v-if="item.order_url" @tap="yuyueBtn" :data-id="item.uid" :data-type="item.utype" :data-url="item.order_url" data-title="预约网址">
              <image src="/static/images/sys/xf_icon3.png" class="img1"></image>
              <text>预约网址</text>
            </view>
            <view class="yybtn" v-if="item.order_result" @tap="yuyueBtn" :data-id="item.rid" :data-type="item.rtype" :data-url="item.order_result" data-title="结果查询">
              <image src="/static/images/sys/xf_icon3.png" class="img1"></image>
              <text>结果查询</text>
            </view>
            <view class="yybtn" v-if="item.url" @tap="yuyueBtn" :data-id="item.id" :data-type="item.type" :data-url="item.url" data-title="预约攻略">
              <image src="/static/images/sys/xf_icon1.png" class="img2"></image>
              <text>预约攻略</text>
            </view>
          </view>
        </view>
        <!-- 查看更多 -->
        <view class="see-more" v-if="showMore" @tap="seemore">
          <view>查看全部预约通道</view>
        </view>
      </view>
    </view>
    <!-- 核酸检测条件 -->
    <view class="hs-box" v-if="infoData.tiaojian.child">
      <view v-for="(item, index) in infoData.tiaojian.child" :key="index" :class="(infoData.tiaojian.showMore1)?'hsjc-border':'hsjc-border1'" @tap="navDetail" :data-id="item.id" :data-type="item.type">
        <view class="hs-flex">
          <image src="http://imgbdb3.bendibao.com/whbdb/20202/28/20200228092343_12218.png?1"></image>
          <text>{{item.block}}</text>
        </view>
        <view class="hs-detail" v-if="item.daoyu">{{item.daoyu}}</view>
      </view>
      <!-- 查看更多 -->
      <view class="see-more" v-if="infoData.tiaojian.child.length>1 && infoData.tiaojian.showMore1" @tap="seemoreBtn" :data-name="infoData.tiaojian.block">
        <view>查看更多</view>
      </view>
    </view>
    <!-- 核酸检测最新消息/政策汇总 -->
    <view class="hs-box" v-if="infoData.msg.child">
      <view v-for="(item, index) in infoData.msg.child" :key="index" :class="infoData.msg.showMore1?'hsjc-border':'hsjc-border1'" @tap="navDetail" :data-id="item.id" :data-type="item.type">
        <view class="hs-flex">
          <image src="http://imgbdb3.bendibao.com/whbdb/20202/28/20200228092343_12218.png?1"></image>
          <text>{{item.block}}</text>
        </view>
        <view class="hs-detail" v-if="item.daoyu">{{item.daoyu}}</view>
      </view>
      <!-- 查看更多 -->
      <view class="see-more" v-if="infoData.msg.child.length>1 && infoData.msg.showMore1" @tap="seemoreBtn" :data-name="infoData.msg.block">
        <view>查看更多</view>
      </view>
    </view>
  </view>
  <fangyi-tools id="fangyiTools"></fangyi-tools>
  <!-- 导粉 -->
  <view class="daofen" v-if="hsData.daofen">
    <rich-text :nodes="hsData.daofen.content" style="user-select:text;-webkit-user-select:text">
    </rich-text>
  </view>

</view>
<!-- 快捷导航 -->
<fastnav :qrcodeimg="qrcodeimg" :citycode="citycode" :showNav="showNav" :showShare="showShare"></fastnav>
</view>
</template>

<script>
// pages/topicality/xiaofeiquan/xiaofeiquan.js
//获取应用实例
const app = getApp();
const util = require("../../../utils/util.js");
var QQMapWX = require("../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
import fastnav from "../../../component/fastnav/fastnav";
import fangyiTools from "../../../component/fangyiTools/fangyiTools";

export default {
  data() {
    return {
      citycode: "sz",
      city: '深圳',
      province: '广东',
      pindex: 0,
      cindex: 0,
      cityPick: ["选择城市"],
      showNav: true,
      // 快捷导航是否展开
      showMore: false,
      showtk: false,
      showShare: true,
      // 显示分享按钮
      inputValue: '',
      provPick: [],
      qrcodeimg: "",
      cityArray: "",
      citylist: "",
      infoData: "",
      hsData: ""
    };
  },

  components: {
    fastnav,
    fangyiTools
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    util.getUrl(app.globalData.url).then(res => {
      this.getProvinceData(options.city);
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.hsData ? this.hsData.title : "核酸检测查询"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: this.hsData ? this.hsData.title : "核酸检测查询",
      imageUrl: "http://imgbdb3.bendibao.com/xcx/20205/20/2020520135146_96009.png",
      query: {
        city: this.citycode
      }
    };
  },
  methods: {
    // 获取定位
    getLocation() {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let city = res.result.address_component.city; // let city="芜湖市";

          let citydata = this.citylist.filter(v => {
            if (city && city.indexOf(v.cityname) != -1) {
              return v;
            }
          });

          if (citydata != '' && city.indexOf(this.city) == -1) {
            uni.showModal({
              content: '您当前定位城市为' + city + '\n是否需要切换到' + city + '核酸检测查询？',
              success: res => {
                if (res.confirm) {
                  this.setData({
                    city: Array.isArray(citydata) ? citydata[0].cityname : this.city,
                    citycode: Array.isArray(citydata) ? citydata[0].citycode : this.citycode,
                    province: Array.isArray(citydata) ? citydata[0].province : this.province,
                    cityPick: ["选择城市"]
                  });
                  let clist = [];
                  this.provPick.forEach((v, k) => {
                    if (v == this.province) {
                      this.setData({
                        pindex: k
                      });
                    }
                  });
                  this.cityArray[this.pindex].citylist.forEach(v => {
                    clist.push(v.cityname);
                  });
                  this.setData({
                    cityPick: this.cityPick.concat(clist)
                  });
                  this.cityPick.forEach((v, k) => {
                    if (v == this.city) {
                      this.setData({
                        cindex: k
                      });
                    }
                  }); // 获取城市公众号二维码

                  this.getQrcode(this.citycode);
                  this.getInfoData(this.citycode);
                }
              }
            });
          }
        }
      });
    },

    // 获取城市公众号二维码
    getQrcode(citycode) {
      util.cityConfig(citycode).then(res => {
        this.setData({
          qrcodeimg: res.qrcode ? res.qrcode : ''
        });
      });
    },

    // 获取有隔离政策的城市
    getProvinceData(optcode) {
      let data = {
        action: "hesuan",
        type: "city"
      };
      util.request('zhuanti.php', data).then(res => {
        this.setData({
          cityArray: res.data.data.city
        });
        let provPick = [];
        let citylist = [];
        let clist = [];
        this.cityArray.forEach(v => {
          v.citylist.forEach(v => {
            citylist.push(v);
          });
          provPick.push(v.province);
          this.setData({
            provPick,
            citylist
          });
        });

        if (this.citylist) {
          this.citylist.forEach((v, k) => {
            if (optcode == v.citycode) {
              this.setData({
                citycode: v.citycode,
                city: v.cityname,
                province: v.province
              });
            } else {
              this.setData({
                citycode: this.citycode,
                city: this.city,
                province: this.province
              });
            }
          });
        }

        this.provPick.forEach((v, k) => {
          if (v == this.province) {
            this.setData({
              pindex: k
            });
          }
        });
        this.cityArray[this.pindex].citylist.forEach(v => {
          clist.push(v.cityname);
        });
        this.setData({
          cityPick: this.cityPick.concat(clist)
        });
        this.cityPick.forEach((v, k) => {
          if (v == this.city) {
            this.setData({
              cindex: k
            });
          }
        }); // 获取城市公众号二维码

        this.getQrcode(this.citycode);
        this.getInfoData();

        if (this.citylist != "" && Array.isArray(this.citylist)) {
          // 获取定位
          this.getLocation();
        }
      });
    },

    // 核酸检测信息
    getInfoData(citycode) {
      let data = {
        action: "hesuan",
        citycode: citycode ? citycode : this.citycode // citycode: 'bj',

      };
      util.request('zhuanti.php', data).then(res => {
        this.selectComponent("#fangyiTools").getTools(citycode);

        if (res.data.data) {
          uni.setNavigationBarTitle({
            title: res.data.data ? res.data.data.title : '核酸检测'
          });

          if (res.data.data.daofen) {
            res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"');
          }

          let resData = res.data.data.other;
          let tempArr = [];
          let dataInfo = [];

          for (let i = 0; i < resData.length; i++) {
            if (tempArr.indexOf(resData[i].block) === -1) {
              dataInfo.push({
                block: resData[i].block,
                showMore1: true,
                child: [resData[i]]
              });
              tempArr.push(resData[i].block);
            } else {
              for (let j = 0; j < dataInfo.length; j++) {
                if (dataInfo[j].block == resData[i].block) {
                  dataInfo[j].child.push(resData[i]);
                  break;
                }
              }
            }
          }

          let temparr = {};
          let count = 0;
          dataInfo.forEach((v, k) => {
            count++;

            if (v.block == "核酸检测地点") {
              temparr.place = v;
            } else if (v.block == "核酸检测费用") {
              temparr.price = v;
            } else if (v.block == "核酸检测条件") {
              temparr.tiaojian = v;
            } else if (v.block == "核酸检测最新消息") {
              temparr.msg = v;
            }

            if (count == dataInfo.length) {
              this.setData({
                infoData: temparr
              });
            }
          });

          if (res.data.data.yuyue) {
            if (res.data.data.yuyue.length > 1) {
              this.setData({
                showMore: true
              });
            }
          }

          this.setData({
            hsData: res.data.data
          });
        }
      });
    },

    // 省份选择
    bindProv: function (e) {
      this.setData({
        pindex: e.detail.value,
        cindex: 0,
        cityPick: ["选择城市"]
      });
      let clist = [];
      this.cityArray[this.pindex].citylist.forEach(v => {
        clist.push(v.cityname);
      });
      this.setData({
        cityPick: this.cityPick.concat(clist)
      });
    },

    // 城市选择
    bindCity(e) {
      this.setData({
        cindex: e.detail.value
      });
      let cityname = this.cityPick[this.cindex];

      if (this.citylist) {
        this.citylist.forEach(v => {
          if (v.cityname == cityname) {
            let citycode = v.citycode;
            this.setData({
              citycode,
              city: cityname
            });
          }
        });
      } // 获取城市公众号二维码


      this.getQrcode(this.citycode);
      this.getInfoData(this.citycode);
    },

    // 输入框赋值
    input(e) {
      this.setData({
        inputValue: e.detail.value
      });
    },

    // 点击搜索
    tojigou() {
      const content = this.inputValue.trim();

      if (content) {
        uni.navigateTo({
          url: `/pages/topicality/jiancejigou/jiancejigou?city=${this.city}&content=${content}`
        });
      } else {
        uni.showToast({
          title: '不能为空哦~',
          icon: 'none'
        });
      }
    },

    // 跳转内容页
    navDetail(e) {
      let id = e.currentTarget.dataset.id;
      let type = e.currentTarget.dataset.type;

      if (id != 0) {
        uni.navigateTo({
          url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + this.citycode
        });
      }
    },

    // 预约查看更多
    seemore() {
      this.setData({
        showMore: false
      });
    },

    // 其他查看更多
    seemoreBtn(e) {
      let name = e.currentTarget.dataset.name;

      for (let key in this.infoData) {
        if (this.infoData[key].block == name) {
          this.infoData[key].showMore1 = false;
        }
      }

      this.setData({
        infoData: this.infoData
      });
    },

    yuyueBtn(e) {
      let id = e.currentTarget.dataset.id;
      let type = e.currentTarget.dataset.type;
      let url = e.currentTarget.dataset.url;
      let title = e.currentTarget.dataset.title;

      if (id != 0) {
        uni.navigateTo({
          url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + this.citycode
        });
      } else {
        this.setData({
          showtk: true
        });
        util.navContact(title, url);
      }
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    /**
     * 页面滑动事件的处理函数
     */
    onPageScroll: function (e) {
      this.setData({
        showNav: false
      });
    }
  }
};
</script>
<style>
/* pages/topicality/xiaofeiquan/xiaofeiquan.wxss */
.main-img{width: 100%;height: 276rpx;}
.city-box{background: #ffffff;border-radius: 35rpx;padding: 10rpx 30rpx;position: absolute;
top: 40rpx;right: 30rpx;display: flex;align-items: center;}
.city-box text{font-size: 30rpx;font-weight: bolder;}
.city-box image{width: 23rpx;height: 15rpx;margin-left: 10rpx;}
.change-city{background:rgba(255,255,255,1);box-shadow:0rpx 6rpx 6rpx rgba(0,0,0,0.16);
opacity:1;border-radius:20rpx;padding:30rpx 0rpx;position: absolute;top:235rpx;width: 90%;
margin-left: 36rpx;display: flex;align-items: center;}
.change-city text{font-size:28rpx;font-family:PingFang SC;font-weight:bold;line-height:36rpx;
color:rgba(20,20,20,1);opacity:1;width: 102rpx;text-align: center;white-space:nowrap;}
.sel-city{display: flex;align-items: center;margin-left: 80rpx;}
.sel-city image{width: 19rpx;height: 10rpx;margin-left: 15rpx}

/* 内容 */
.hesuan-box{margin: 80rpx 0rpx 30rpx 0rpx;}
.hs-box{border-bottom: 15rpx solid #EEEEEE;padding:0rpx 45rpx 0 45rpx;}
/* .hs-box:last-child{border: 0;} */
.hs-flex{display: flex;flex-direction: row;align-items: center}
.hs-flex image{width: 24rpx;height: 16rpx;}
.hs-flex text{font-size:32rpx;font-family:PingFang SC;font-weight:600;line-height:40rpx;
color:rgba(20,20,20,1);opacity:1;margin-left: 20rpx;}
.hs-detail{font-size:28rpx;font-family:PingFang SC;font-weight:500;line-height:40rpx;
color:rgba(154,154,154,1);opacity:1;margin-left: 25rpx;margin-top: 20rpx;}

/* 核酸检测费用 */
.hs-border{border-bottom: 1rpx solid #EEEEEE;padding: 30rpx 0rpx;}
.hs-border:last-child{border: 0}
.hs-border:nth-of-type(n+3){display: none;}
.hs-border1{border-bottom: 1rpx solid #EEEEEE;padding: 30rpx 0rpx;}
.hs-border1:last-child{border: 0}

.hsjc-border{border-bottom: 1rpx solid #EEEEEE;padding: 30rpx 0rpx;}
.hsjc-border:last-child{border: 0}
.hsjc-border:nth-child(n+2){display: none;}
.hsjc-border1{border-bottom: 1rpx solid #EEEEEE;padding: 30rpx 0rpx;}
.hsjc-border1:last-child{border: 0}

.hsyy-box{display: flex;flex-direction: row;align-items: center;}
.hsyy-box view{font-size:28rpx;font-family:PingFang SC;font-weight:500;line-height:40rpx;
color:rgba(20,20,20,1);opacity:1;margin-bottom: 20rpx;margin-left: 25rpx;white-space:nowrap;}
.hsyy-box text{font-size:28rpx;font-family:PingFang SC;font-weight:500;line-height:40rpx;
color:rgba(154,154,154,1);opacity:1;margin-bottom: 20rpx;margin-left: 35rpx;word-break:break-all;}
.yybtn-box{display: flex;flex-direction: row;align-items: center;justify-content: space-between;
margin-top: 20rpx;}
.yybtn{background:#D9E6F8;border-radius:38rpx;display: flex;flex-direction: row;align-items: center;
padding: 15rpx 25rpx;}
.yybtn text{font-size:26rpx;font-family:PingFang SC;font-weight:bold;line-height:36rpx;
color:rgba(81,149,221,1);opacity:1;white-space:nowrap;}
.img1{width: 30rpx;height: 30rpx;margin-right: 8rpx;}
.img2{width: 25rpx;height: 30rpx;margin-right: 8rpx;}
/* 查看更多 */
.see-more{display: flex;justify-content: center;margin: 30rpx 0;}
.see-more view{background-color: #EEEEEE;padding: 20rpx 40rpx;font-size:26rpx;border-radius:12rpx;
font-family:PingFang SC;font-weight:600;color: #141414;text-align: center;width: 200rpx;white-space:nowrap;}
/* 导粉 */
.daofen{margin:0 30rpx 80rpx 30rpx;text-align: center;}
.p_class{margin:10rpx 30rpx;line-height: 50rpx;}
/* 搜索 */
.select{
  padding: 34rpx 31rpx;
}
input::-webkit-input-placeholder {
  color: #888888;
  
}

.jigou text {
  font-size: 29rpx;
  color: #333333;
  font-weight: 700;
}
.input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 98rpx;
  margin-top: 31rpx;
  padding-right: 25rpx;
  line-height: 98rpx;
  background-color: #F8F8F8;
  border-radius: 12rpx;
}

input {
  flex: 1;
  height: 100%;
  padding-left: 32rpx;
  line-height: 98rpx;
  font-size: 24rpx;
  outline: none;
  border: 0;
  background-color: transparent;
}


.search {
  display: inline-block;
  width: 111rpx;
  height: 56rpx;
  margin-left: 48rpx;
  line-height: 56rpx;
  font-size: 27rpx;
  text-align: center;
  color: #FFFFFF;
  background-color: #5395DE;
  border-radius: 7rpx;
}
</style>